// Copyright (C) 2021-2022 Intel Corporation
// Copyright (C) 2024 CVAT.ai Corporation
//
// SPDX-License-Identifier: MIT

import React from 'react';
import { Row } from 'antd/lib/grid';
import Text from 'antd/lib/typography/Text';
import Collapse from 'antd/lib/collapse';

import Icon, { ExclamationCircleFilled } from '@ant-design/icons';
import { ArrowIcon } from 'icons';
import { Alert, Col, Tag } from 'antd';
import useAnnotation from 'hooks/useAnnotation';
// import ItemAttribute from './object-item-attribute';

interface Props {
    readonly: boolean;
    collapsed: boolean;
    attributes: any[];
    values: Record<number, string>;
    collapseLabel: JSX.Element;
    color: string;
    labelName: string;
    clientID: number | null;
    changeAttribute(attrID: number, value: string): void;
    collapse(): void;
}

export function attrValuesAreEqual(next: Record<number, string>, prev: Record<number, string>): boolean {
    const prevKeys = Object.keys(prev);
    const nextKeys = Object.keys(next);

    return (
        nextKeys.length === prevKeys.length &&
        nextKeys.map((key: string): boolean => prev[+key] === next[+key]).every((value: boolean) => value)
    );
}

function attrAreTheSame(prevProps: Props, nextProps: Props): boolean {
    return (
        nextProps.readonly === prevProps.readonly &&
        nextProps.collapsed === prevProps.collapsed &&
        nextProps.attributes === prevProps.attributes &&
        attrValuesAreEqual(nextProps.values, prevProps.values)
    );
}

function ItemAttributesComponent(props: Props): JSX.Element {
    const {
        collapsed,
        attributes,
        values,
        readonly,
        collapseLabel,
        changeAttribute,
        color,
        labelName,
        clientID,
        collapse,
    } = props;

    const { approval } = useAnnotation();
    const [origin, firstReview = {}] = approval?.annotationData?.[clientID!] || [];
    const approvalStatus = firstReview?.approvalStatus;
    const showData = approvalStatus === 0 ? origin : firstReview;

    return (
        <div>
            {!!approvalStatus && (
                <>
                    <div className='bg-[#FFF7E8] px-3 py-9px mb-3 w-full'>
                        <ExclamationCircleFilled className='text-[#FF7D00] mr-2' />
                        <span>审核状态：{approvalStatus === 1 ? '初审修改、复审待核' : '初审修改、复审已核'}</span>
                    </div>
                    <div className='font-bold text-base mb-2 font-bold px-3'>
                        {approvalStatus === 1 ? '初审员' : '标注员'}
                    </div>
                </>
            )}
            <div className='p-3 w-full box-border'>
                <Collapse
                    className='cvat-objects-sidebar-state-item-collapse'
                    activeKey={collapsed ? [] : ['details']}
                    onChange={collapse}
                    expandIconPosition='end'
                    collapsible='icon'
                    expandIcon={({ isActive }) => (
                        <Icon component={ArrowIcon} className={isActive ? 'rotate-0' : 'rotate-180'} />
                    )}
                    items={[
                        {
                            key: 'details',
                            label: (
                                <div>
                                    <Tag color={color}>{clientID}</Tag>
                                    <Text className='text-base'>{showData.label?.name}</Text>
                                </div>
                            ),
                            children: (
                                <div className='!bg-[#F7F8FA] p-3 mt-3 rounded space-y-3'>
                                    {showData.label?.attributes.map(
                                        (attribute: any): JSX.Element => (
                                            <Row
                                                key={attribute.id}
                                                align='middle'
                                                justify='start'
                                                className='cvat-object-item-attribute-wrapper '
                                                gutter={[16, 0]}
                                            >
                                                <Col span={24}>
                                                    <Text className='text-[#86909C]'>{attribute.name}：</Text>
                                                    {showData.attributes?.[attribute.id]}
                                                </Col>
                                            </Row>
                                        ),
                                    )}
                                </div>
                            ),
                        },
                    ]}
                />
            </div>
        </div>
    );
}

export default React.memo(ItemAttributesComponent, attrAreTheSame);
